import Image from "@/components/base/Image"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { useGetAccounts, useRemoveAccounts } from "@/features/business"
import { useModalSlideUp } from "@/features/useModal"
import StateDisplay from "@/pages/TransactionRecordPage/components/StateDisplay"
import AccountCard from "@/pages/WithdrawAccounts/components/AccountCard"
import ConfirmModal from "@/pages/WithdrawAccounts/components/ConfirmModal"
import SelectAccountType from "@/pages/WithdrawAccounts/components/SelectAccountType"
import styled from "@emotion/styled"
import { useEffect } from "react"
import { PageHeader } from "./components/PageHeader"
import { useGetFinanceChannelList } from "@/features/business"

const Root = styled.div`
    font-family: "Gilroy";
    font-size: 12rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background:
        radial-gradient(
            136.79% 100% at 100% 0%,
            rgba(255, 184, 219, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            100% 61.68% at 0% 100%,
            rgba(179, 255, 204, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ebf3ff;
`
const PageHint = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 12rem;
    line-height: 100%;
    height: 32rem;
    background: #ffebf0;
    color: #ff4775;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;

    & > img {
        width: 16rem;
        height: 16rem;
        object-fit: contain;
    }
`
const PageContentWrapper = styled.div`
    flex: 1;
    padding: 16rem;
    display: flex;
    flex-direction: column;
    gap: 8rem;
`

export default function MyWithdrawAccounts() {
    const { data: channels = [] } = useGetFinanceChannelList()
    const { data: accounts = [], refresh } = useGetAccounts()
    const { removeAccount, success } = useRemoveAccounts()
    const { open: openModal } = useModalSlideUp("account-page")
    const enabledAccount = accounts.filter((item) => item.status === 1)

    const onAdd = () => {
        if (enabledAccount.length >= 5) {
            openModal(<ConfirmModal type="limit" />, {
                closeOnClickMask: false,
                closeOnEscape: false,
            })
            return
        }
        openModal(
            <SelectAccountType
                accounts={enabledAccount}
                channels={channels}
                onClose={handleClose}
            />,
            {
                closeOnClickMask: true,
                closeOnEscape: false,
            },
        )
    }

    const handleClose = () => {
        refresh()
    }

    // 删除提款的账户
    const handleConfirmDelete = (id?: string) => {
        // 确认删除操作
        if (id) {
            removeAccount(id)
            refresh()
        }
    }

    const onDelete = (id?: string) => {
        openModal(
            <ConfirmModal
                type="delete"
                onConfirm={() => {
                    handleConfirmDelete(id)
                }}
            />,
            {
                closeOnClickMask: false,
                closeOnEscape: false,
            },
        )
    }

    useEffect(() => {
        if (success) {
            refresh()
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [success])

    return (
        <Root>
            <PageHeader
                title="My Withdraw Accounts"
                iconType="black-arrow"
                textColor="#131416"
                onAdd={onAdd}
            />
            <PageHint>
                <Image src="pages/WithdrawAccounts/dark_fill.webp" />
                <p>You can add up to 5 withdrawal accounts</p>
            </PageHint>
            <PageContentWrapper>
                {enabledAccount.length <= 0 && <StateDisplay />}
                {enabledAccount.map((item) => (
                    <AccountCard
                        key={item.id}
                        data={item}
                        onClick={() => {
                            onDelete(item.id)
                        }}
                    />
                ))}
            </PageContentWrapper>
            <ModalSlideUp familyName="account-page" />
        </Root>
    )
}
